<template>
  <div class="movies">
    <div class="com_headerlist">
      <h3>正在热映</h3>
    </div>
    <div class="fils_list" v-if="data1.length > 0">
      <ul>
        <li v-for="item in data1" :key="item.filmId">
            <router-link :to='`/films/${item.filmId}`' tag="div">
          <img :src="item.poster" :alt="item.name" />
          <div class="left">
            <p>
              {{ item.name }} <span>{{ item.item.name }}</span>
            </p>
            <p>观众评分:{{ item.grade }}</p>
            <p>主演:{{ item.actorsstr }}</p>
            <p>{{ item.nation }}|{{ item.runtime }}分钟</p>
            
          </div>
          </router-link>
        </li>
      </ul>
        <el-button v-if="data1.length<total1" type="warning" @click="getmore1">查看更多</el-button>
      <el-button disabled v-else type="danger">到底了</el-button>
    </div>
    <div class="com_headerlist">
      <h3>即将热映</h3>
    </div>
    <div class="fils_list" v-if="data2.length > 0">
      <ul>
        <li v-for="(item, index) in data2" :key="item.filmId">
           <router-link :to='`/films/${item.filmId}`' tag="div">
          <img :src="item.poster" :alt="item.name" />
          <div class="left">
            <p>
              {{ item.name }} <span>{{ item.item.name }}</span>
            </p>

            <p>主演:{{ item.actorsstr }}</p>
            <p v-if="index > 4">上映日期：{{ item.premiereAt | timeFormat }}</p>
            <p v-else>上映日期：{{ item.premiereAt }}</p>
          </div>
           </router-link>
        </li>
      </ul>
      <el-button v-if="data2.length<total2" type="warning" @click="getmore2">查看更多</el-button>
      <el-button disabled v-else type="danger">到底了</el-button>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import Header from "~/components/common/header.vue";
export default {
  data() {
    return {
      data1: [],
      pageNum1: 1,
      pageSize1: 4,
      total1:0,
      disAbled1:false,

      data2: [],
     total2 :0,
      pageNum2: 1,
      pageSize2: 4,
      disAbled2:false,
    };
  },
  head() {
    return {
      meta: [
        {
          name: "知崖近期电影咨询",
          content: "查看最近的电影院的播放信息",
        },
      ],
    };
  },
  components: {
    Header,
  },

  async asyncData({ $axios, store }) {
    let cityId = store.state.citys != null ? store.state.citys.cityId : 510100;

    // 服务端获取获取 正在热映的数据
    let data1 = await $axios({
      url: `/gateway?cityId=${cityId}&pageNum=1&pageSize=4&type=1&k=8896624`,
      method: "get",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    });

    // 服务端获取获取 即将上映的数据
    let data2 = await $axios({
      url: `/gateway?cityId=${cityId}&pageNum=1&pageSize=4&type=2&k=140757`,
      method: "get",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    });


    // 服务端获取获取 附近影院的信息
    // let data3 = await $axios({
    //   url: `/gateway?cityId=${cityId}&ticketFlag=1&k=4917235`,
    //   method: "get",
    //   headers: {
    //     "X-Client-Info":
    //       '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257","bc":"440100"}',
    //     "X-Host": "mall.film-ticket.cinema.list",
    //   },
    // });


    //对获取的主演信息做处理   正在热映的数据
    for (let i = 0; i < data1.data.films.length; i++) {
      let actorsstr = [];
      for (let j = 0; j < data1.data.films[i].actors.length; j++) {
        actorsstr.push(data1.data.films[i].actors[j].name);
      }
      actorsstr = actorsstr.join(" ");
      data1.data.films[i].actorsstr = actorsstr;
    }

    // 对获取的主演信息做处理 即将上映的数据
    for (let i = 0; i < data2.data.films.length; i++) {
      let actorsstr = [];
      for (let j = 0; j < data2.data.films[i].actors.length; j++) {
        actorsstr.push(data2.data.films[i].actors[j].name);
      }

      let message = data2.data.films[i].premiereAt; //获取当前时间戳
      let newDate = new Date();
      newDate.setTime(message * 1000);
      // console.log(newDate.toLocaleDateString()); // 2014年6月18日
      // console.log(newDate.toLocaleString()); // 2014年6月18日 上午10:33:24
      data2.data.films[i].premiereAt = newDate.toLocaleDateString();

      actorsstr = actorsstr.join(" ");
      data2.data.films[i].actorsstr = actorsstr;
    }

    return {
      total1:data1.data.total,
      total2:data2.data.total,
      data1: data1.data.films,
      data2: data2.data.films,

    };
  },

  filters: {
    timeFormat: function (message) {
      let newDate = new Date();
      newDate.setTime(message * 1000);
      message = newDate.toLocaleDateString();
      return message;
    },
  },

  mounted() {},

  methods: {
    comData(filmsdata) {
      for (let i = 0; i < filmsdata.length; i++) {
        let actorsstr = [];
        for (let j = 0; j < filmsdata[i].actors.length; j++) {
          actorsstr.push(filmsdata[i].actors[j].name);
        }
        actorsstr = actorsstr.join(" ");
        filmsdata[i].actorsstr = actorsstr;
      }

      return filmsdata;
    },

    async getmore1() {
      let cityId =
        this.$store.state.citys != null
          ? this.$store.state.citys.cityId
          : 510100;
      this.pageNum1 = this.pageNum1 + 1;
      let data1 = await this.$axios({
        url: `/gateway?cityId=${cityId}&pageNum=${this.pageNum1}&pageSize=${this.pageSize1}&type=1&k=8896624`,
        method: "get",
        headers: {
          "X-Client-Info":
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
          "X-Host": "mall.film-ticket.film.list",
        },
      });

      if (data1.data.films.length!=0) {
        this.data1 = [...this.data1, ...this.comData(data1.data.films)];
      }else{
        this.disAbled1=true
      }
    },

    async getmore2() {
      let cityId =
        this.$store.state.citys != null
          ? this.$store.state.citys.cityId
          : 510100;
      this.pageNum2 = this.pageNum2 + 1;
      let data2 = await this.$axios({
        url: `/gateway?cityId=${cityId}&pageNum=${this.pageNum2}&pageSize=${this.pageSize2}&type=2&k=140757`,
        method: "get",
        headers: {
          "X-Client-Info":
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
          "X-Host": "mall.film-ticket.film.list",
        },
      });
    //   console.log(data2)
      if (data2.data.films.length!=0) {
        this.data2 = [...this.data2, ...this.comData(data2.data.films)];
      }else{
        this.disAbled2=true
      }
    },
  },
};
</script>

<style scoped lang="less">
.fils_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  ul {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;

    li {
      margin-bottom: 20px;
      width: 300px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 45px;
      img {
        width: 214px;
        height: 300px;
      }

      .left {
        p {
          color: #444;
          font-size: 12px;
          height: 22px;
          line-height: 22px;
          width: 210px;
          white-space: nowrap !important;
          overflow: hidden;
          &:nth-of-type(1) {
            margin-top: 10px;
            color: #222;
            font-size: 16px;
            height: 34px;
            line-height: 24px;
          }

          span {
            color: crimson;
            font-weight: 600;
            font-size: 24px;
          }
        }
      }
    }
  }

  .el-button {
    width: 120px;
    margin: 20px 0;
  }
}

.com_headerlist {
  height: 100px;
  line-height: 100px;
  text-align: center;
  h3 {
    color: chocolate;
    font-size: 35px;
  }
}

.movies {
  .headerlist {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .banner {
    width: 100vw;
    height: 600px;
    background-image: url(~static/img/jzfeatures_1.jpg);
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .pos_center {
      width: 600px;
      height: 200px;
      // border: 1px solid #000;
      position: relative;
      input {
        position: absolute;
        border: 1px solid #fff;
        font-size: 18px;
        height: 50px;
        border-radius: 25px;
        padding-left: 30px;
        width: 300px;
        color: #333;
        top: 40px;
        left: 50%;
        transform: translate(-50%, 0);
      }
      p {
        font-size: 20px;
        color: #fff;
        position: absolute;
        top: 110px;
        left: 50%;
        transform: translate(-50%, 0);
        white-space: nowrap;
      }
    }
  }
}
</style>